<template>
	<view class="content">
		<view class="content-list">
			<view class="mess-title">手机号码</view>
			<view class="mess-value">
				<input v-model="mobile" placeholder="输入有效手机号" />
			</view>
			<view class="captcha" :class="beenSent?'active':''" @click="obtain">{{ obtainMess }}</view>
		</view>
		<view class="content-list">
			<view class="mess-title">验证码</view>
			<view class="mess-value">
				<input v-model="code" placeholder="输入6位验证码" />
			</view>
		</view>
		<view class="bind-button" @click="bindPhone">绑定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obtainMess: "获取验证码",
				beenSent: false,
				mobile: "",
				code: ""
			}
		},
		methods: {
			obtain() {
				if (this.beenSent) {
					return false
				} else {
					if (this.checkMobile(this.mobile)) {
						const _this = this;
						let second = 60;
						this.beenSent = true;
						_this.obtainMess = "重新获取(" + second + ")";
						const interval = setInterval(() => {
							second--;
							if (second > 0) {
								_this.obtainMess = "重新获取(" + second + ")";
							} else {
								_this.obtainMess = "重新获取";
								this.beenSent = false;
								clearInterval(interval)
							}
						}, 1000)
						// 发送验证码
						const path = {
							app: "wx",
							api: "api_wx_user_sendCode",
							version: "1.0",
							type: "1",
							data: {
								mobile: this.mobile
							}
						}
						this.sendSock(path)
					} else {
						uni.showToast({
							icon: "none",
							title: "请输入正确的手机号",
							duration: 1000
						});
					}
				}
			},
			bindPhone() {
				const path = {
					app: "wx",
					api: "api_wx_user_mobileBinding",
					version: "1.0",
					type: "1",
					data: {
						mobile: this.mobile,
						code: this.code
					}
				}
				this.sendSock(path)
			},
			sendSock(path) {
				if (this.$store.state.socketOpen) {
					uni.sendSocketMessage({
						data: JSON.stringify(path)
					});
				} else {
					this.$store.state.socketMsgQueue.push(JSON.stringify(path));
				}
				const _this = this
				uni.onSocketMessage(function(res) {
					_this.getSock(res.data)
				});
			},
			getSock(res) {
				console.log('res', res)
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else {
						if (resj.api === "api_wx_user_login") {
							this.$store.commit('login', resj.data);
							this.keepMess(resj.data.token)
							console.log('登录', resj.data)
						} else if (resj.api === "api_wx_user_keepLogin") {
							console.log('保持登录', resj.data)
						} else if (resj.api === "api_wx_order_createOrder") {
							const price = this.shopCart.allMoney
							const item = {
								price: price,
								token: resj.data.token
							}
							this.pay(item);
						} else if (resj.api === "api_wx_user_mobileBinding") {
							uni.showToast({
								icon: "none",
								title: "绑定成功",
								duration: 1000
							});
							const _this = this;
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/order/verify' + '?' + _this.version
								})
							}, 1000)

						}
					}
				}
			}
		}
	}
</script>

<style>
	.content {
		padding: 4rpx 40rpx 0rpx 40rpx;
	}

	.content-list {
		height: 105rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #E0E0E0;
		justify-content: space-between;
	}

	.captcha {
		width: 180rpx;
		height: 60rpx;
		background: rgba(8, 193, 96, 1);
		border-radius: 4rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mess-title {
		width: 167rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.mess-value {
		flex: 1;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
	}

	.bind-button {
		margin: 90rpx auto 0rpx auto;
		width: 360rpx;
		height: 80rpx;
		background: rgba(8, 193, 96, 1);
		border-radius: 6rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.captcha.active {
		background-color: #CCCCCC;
	}
</style>
